<template>
  <div class="content">
    <div style="display: grid; grid-template-columns: 1fr 2fr; padding: 20px">
      <div>
        <div class="after_class">学员档案</div>
        <!-- <div class="marT15">
          <span class="publicColor">2430</span>
          <span class="minute_unit marL10">分钟</span>
        </div> -->
      </div>
      <!-- <div>图表</div> -->
    </div>
    <main>
      <div class="practise todayLx">
        <div class="questionType">
          <div class="flex flex-align-center typeStyle">
            <img class="typePic" src="../../assets/img/cj.png" alt="" />
            <div class="marL30">
              <div>成绩记录</div>
              <div class="marT10">
                <span class="publicColor">50</span>
                <span class="xtUnit">分</span>
              </div>
            </div>
          </div>
          <div class="flex flex-align-center typeStyle">
            <img class="typePic" src="../../assets/img/cthg.png" alt="" />
            <div class="marL30">
              <div>错题回顾</div>
              <div class="marT10">
                <span class="publicColor">72</span>
                <span class="xtUnit">题</span>
              </div>
            </div>
          </div>
          <div class="flex flex-align-center typeStyle">
            <img class="typePic" src="../../assets/img/sc.png" alt="" />
            <div class="marL30">
              <div>我的收藏</div>
              <div class="marT10">
                <span class="publicColor">23</span>
                <span class="xtUnit">题</span>
              </div>
            </div>
          </div>
          <div class="flex flex-align-center typeStyle">
            <img class="typePic" src="../../assets/img/lxjd.png" alt="" />
            <div class="marL30">
              <div>练习进度</div>
              <div class="marT10">
                <span class="publicColor">50</span>
                <span class="xtUnit">题</span>
              </div>
            </div>
          </div>
          <div class="flex flex-align-center typeStyle">
            <img class="typePic" src="../../assets/img/mkpjf.png" alt="" />
            <div class="marL30">
              <div>模考平均分</div>
              <div class="marT10">
                <span class="publicColor">50</span>
                <span class="xtUnit">分</span>
              </div>
            </div>
          </div>
          <div class="flex flex-align-center typeStyle">
            <img class="typePic" src="../../assets/img/ljks.png" alt="" />
            <div class="marL30">
              <div>累计考试</div>
              <div class="marT10">
                <span class="publicColor">50</span>
                <span class="xtUnit">次</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="class_work publicStyle">
        <div class="after_class">科目一</div>
        <div class="need marT30">今日共有100道课后习题需要完成</div>
        <div class="subjectOne" style="margin-top: 70px">
          <div class="simulated flex" @click="toAfterClass">
            <img src="@/assets/img/mnks.png" alt="" class="icon_subject" />
            <div class="marL20">
              <div class="f30 marT20">模拟考试</div>
              <div class="f18" style="margin-top: 15px">100%仿真</div>
            </div>
          </div>
          <div class="order flex">
            <img src="../../assets/img/sxlx.png" alt="" class="icon_subject" />
            <div class="marL20">
              <div class="f30 marT20">顺序练习</div>
              <div class="f18" style="margin-top: 15px">新题抢先练</div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="knowledge flex flex-align-center flex-justify-between" @click="toSubjectFour">
        <div>
          <div class="flex flex-align-center">
            <img src="@/assets/img/onePic.png" alt="" class="iconPic" />
            <div class="classType marL12">科目四</div>
          </div>
          <div class="subtitle marT20">视频/视频/视频</div>
        </div>
        <img src="@/assets/img/jiantou.png" alt="" class="jtPic" />
      </div>
      <div class="knowledge flex flex-align-center flex-justify-between" @click="toFullScoreExam">
        <div>
          <div class="flex flex-align-center">
            <img src="@/assets/img/onePic.png" alt="" class="iconPic" />
            <div class="classType marL12">满分考试</div>
          </div>
          <div class="subtitle marT20">1000道题目练习</div>
        </div>
        <img src="@/assets/img/jiantou.png" alt="" class="jtPic" />
      </div>
      <div class="knowledge flex flex-align-center flex-justify-between" @click="toCanCelRestore">
        <div>
          <div class="flex flex-align-center">
            <img src="@/assets/img/onePic.png" alt="" class="iconPic" />
            <div class="classType marL12">注销恢复</div>
          </div>
          <div class="subtitle marT20">测试/考试真题</div>
        </div>
        <img src="@/assets/img/jiantou.png" alt="" class="jtPic" />
      </div>
      <div class="knowledge flex flex-align-center flex-justify-between" @click="toThreeForceTest">
        <div>
          <div class="flex flex-align-center">
            <img src="@/assets/img/onePic.png" alt="" class="iconPic" />
            <div class="classType marL12">三力测试</div>
          </div>
          <div class="subtitle marT20">测试/考试真题</div>
        </div>
        <img src="@/assets/img/jiantou.png" alt="" class="jtPic" />
      </div>
    </footer>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function toAfterClass() {
  router.push({
    name: 'after_class',
  })
}
function toSubjectFour() {
  router.push({
    name: 'subject_four',
  })
}
function toFullScoreExam() {
  router.push({
    name: 'wrong_question_collection',
  })
}
function toCanCelRestore() {
  router.push({
    name: 'specialExercises',
  })
}
function toThreeForceTest() {
  router.push({
    name: 'three_force_test',
  })
}
</script>
<style scoped lang="scss">
// @import '@/assets/css/public.scss';

main {
  padding: 20px;
  display: grid;
  grid-template-areas:
    'wide narrow'
    'equal1 equal2 equal3';
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.practise {
  grid-area: wide;
}

.class_work {
  grid-area: narrow;
}

// .knowledge {
//   grid-area: equal1;
// }

// .piano {
//   grid-area: equal2;
// }

// .exam {
//   grid-area: equal3;
// }
main {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    'wide wide narrow'
    'equal1 equal2 equal3';
}

.practise {
  grid-column: 1 / 3;
}

.class_work {
  grid-column: 3 / 4;
}

.publicStyle {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px 20px 0 30px;
  cursor: pointer;
  // transition: all 0.3s ease; /* 添加过渡效果 */
}

// .publicStyle:hover {
//   transform: translateY(-10px); /* 上移10像素 */
//   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 悬停时更明显的阴影 */
// }
.information {
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
}

.information:hover {
  transform: translateY(-10px);
  /* 上移10像素 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 悬停时更明显的阴影 */
}

.after_class {
  font-size: 32px;
  font-weight: bold;
}

.subtitle {
  color: #fff;
  font-size: 20px;
}

.need {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  background-color: #60c041;
}

.todayLx {
  // background-color: #fff;
  border-radius: 8px;
  // padding: 20px 15px 0px;
  border-radius: 8px;
  // box-shadow: 0 0 10px rgba(178, 177, 177, 0.3);
}

.minute_unit {
  color: rgb(107, 127, 224, 0.8);
  font-size: 15px;
}

.questionType {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  // margin-top: 20px;
}

.typePic {
  width: 100px;
  height: 100px;
}

.xtUnit {
  font-size: 15px;
  margin-left: 10px;
}

.typeStyle {
  background-color: #fff;
  border-radius: 14px;
  padding: 40px 20px;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
  // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 初始阴影 */
}

.typeStyle:hover {
  transform: translateY(-10px);
  /* 上移10像素 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 悬停时更明显的阴影 */
  cursor: pointer;
}

.vh35 {
  height: 35vh;
}

footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.jtPic {
  width: 42px;
  height: 12px;
  position: absolute;
  right: 260px;
  top: 50%;
  margin: 0;
  opacity: 0;
}

.iconPic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
}

.knowledge {
  background: url('@/assets/img/kmbg.png') no-repeat 100%;
  border-radius: 8px;
  position: relative;
  padding: 20px 30px;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
  cursor: pointer;
}

.knowledge:hover {
  .jtPic {
    opacity: 1;
    right: 50px;
    transition: all 0.3s ease;
  }

  transform: translateY(-10px);
  /* 上移10像素 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 悬停时更明显的阴影 */
}

.classType {
  font-size: 32px;
  color: #fff;
  font-weight: bold;
}

.recommended_infor {
  background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
}

.subjectOne {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.simulated {
  background: linear-gradient(to right, #58b698, #8dd5ba);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
  cursor: pointer;
}

.order {
  background: linear-gradient(to right, #4d67f4, #7eafff);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
  cursor: pointer;
}

.order:hover {
  transform: translateY(-10px);
  /* 上移10像素 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 悬停时更明显的阴影 */
}

.simulated:hover {
  transform: translateY(-10px);
  /* 上移10像素 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 悬停时更明显的阴影 */
}

.icon_subject {
  width: 120px;
  height: 120px;
}

.f30 {
  font-size: 30px;
  color: #fff;
}

.f18 {
  font-size: 18px;
  color: #fff;
}
</style>
